<script setup>
    // download function coding 
    import { getCurrentInstance} from 'vue';
    const props = defineProps(['id', 'songName']);
    const axios = getCurrentInstance().proxy.$http;
    const download = async () => {
        let { data } = await axios.get(`/song/url?id=${props.id}`);
        downloadFile(data.data[0].url, props.songName)
    }
    const downloadFile = async (url, fileName) => {
        let res = await fetch(url);
        res = await res.blob();
        const a = document.createElement('a');
        const path = URL.createObjectURL(res);
        a.href = path;
        a.download = fileName;
        a.click();
        URL.revokeObjectURL(path);
    }

</script>

<template>
    <div @click="download"><img src="../../assets/img/download-black.png" alt=""></div>
</template>

<style lang='less' scoped>
    div{
        padding: 2px!important;
        width: 20px!important;
        height: 20px!important;
        cursor: pointer;
        position: relative;
        &:hover{
            background-color: #ddd;
            border-radius: 60%;
        }
        img{
            display: block;
            width: 95%;
            height: 95%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    }
</style>